<template>
<div>
    <el-menu
      :default-active="defaultActive"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="rgba(1,18,67, 1)"
      text-color="#fff"
      active-text-color="#ffd04b"
      >

      <h3>Wchime智能家居管理系统</h3>

      <div v-for="item in meamData">
        <div v-if="!item.children">
            <el-menu-item @click="clickmemu(item)" :key="item.name" :index="item.name" >
        <!-- <i class="el-icon-setting"></i> -->
            <span slot="title">{{item.label}}</span>
            </el-menu-item> 
        </div>
        
        <div v-if="item.children">
        <el-submenu :index="item.name">
        <template slot="title">
         
          <span>{{item.label}}</span>
            </template>
            <el-menu-item-group>
            <el-menu-item @click="clickmemu(ch)" v-for="ch in item.children" :index="ch.name">{{ch.label}}</el-menu-item>
            
            </el-menu-item-group>
        
      </el-submenu>
        </div>

      </div>

      


    </el-menu>

</div>
  </template>
  
  <script>
  import bus from "@/bus.js"
  export default {
    name: 'leftNav',
    data(){
        return{
            meamData:[
                {
                    path:"alarmlist",
                    name:"alarmlist",
                    label:"告警列表",
                    url: "/alarmlist",
                },
                {
                    path:"room",
                    name:"room",
                    label:"房间管理",
                    url: "/room",
                    children:[
                        {
                            path:"rooms",
                            name:"rooms",
                            label:"房间列表",
                            url: "/rooms",
                        },
                        {
                            path:"roomtype",
                            name:"roomtype",
                            label:"房间类型",
                            url: "/roomtype",
                        },
                        {
                            path:"roomfloor",
                            name:"roomfloor",
                            label:"房间区域",
                            url: "/roomfloor",
                        },
                    ]
                },
                {
                    path:"device",
                    name:"device",
                    label:"设备管理",
                    url: "/device",
                    children:[
                        {
                            path:"devices",
                            name:"devices",
                            label:"设备列表",
                            url: "/devices",
                        },
                        {
                            path:"devicetype",
                            name:"devicetype",
                            label:"设备类型",
                            url: "/devicetype",
                        },
                        
                      ]
                },
                {
                    path:"users",
                    name:"users",
                    label:"用户管理",
                    url: "/users",
                },
                {
                    path:"logs",
                    name:"logs",
                    label:"日志管理",
                    url: "/logs",
                    children:[
                        {
                            path:"loglist",
                            name:"loglist",
                            label:"日志列表",
                            url: "/loglist",
                        },
                        
                    ]

                }
            ],
            defaultActive:"rooms"
        }
    },
    created(){
        // console.log(this.$route.path)
        var pathlist = this.$route.path.split('/')
        this.defaultActive = pathlist[pathlist.length-1]
       
        // var a = this.getTitle(this.defaultActive)
        // bus.$emit("routerTitle", a)
        // console.log(a)
    },

    methods: {
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      clickmemu(item){
        // console.log(item)
        this.$router.push(item.path)
        
    //    bus.$emit("routerTitle", item.label)
      },
    //   getTitle(path){
    //     console.log(path)
    //     for(var i=0;i<this.meamData.length; i++){
    //         if (this.meamData[i].children){
    //             for(var j=0;j++;j<this.meamData[i].children){
    //                 // console.log("----", this.meamData[i].children[j].path)
    //                 if(this.meamData[i].children[j].path==path){
    //                 return this.meamData[i].children[j].label
    //             }
    //             }
    //         }else{
    //             // console.log("===", this.meamData[i].path)
    //             if(this.meamData[i].path==path){
    //                 return this.meamData[i].label
    //             }
    //         }
    //     }
    //   }
    },

    computed:{
      
    }
  }
  
  </script>
  

  <style lang="scss" scoped>

    .el-menu-vertical-demo:not(.el-menu--collapse){
        min-height: 400px;
    }
    .el-menu{
        height: 100vh;
        // width: 200px;
        margin-right: 0;
        padding-right: 0;
        border: none;
        
        h3{
            color: #fff;
            margin-top: 10px;
            // height: 56px;
            // line-height: 56px;
            font-size: 18px;
            text-align: center;
        }
    }

  </style>
  